<template>
  <div>
    <!-- Header -->
    <header class="flex items-center p-5 bg-white shadow-md pl-12">
      <!-- 加载状态判断 -->
      <div v-if="loading" class="loader-container">
        <div class="loader"></div>
      </div>
      <img v-else :src="image.src" alt="图标" class="w-16 h-16 mr-4">
      <h1 class="text-3xl font-bold">农业外来入侵物种防控与管理平台</h1>
    </header>

    <!-- Main navigation -->
    <nav class="bg-[#16407A] text-white py-4 px-6"> <!-- 增加左右内边距 -->
      <ul class="flex flex-wrap justify-between max-w-full mx-auto"> <!-- 改为 justify-between 使项目分布均匀 -->
        <li class="mx-4">
          <router-link to="/home" exact-active-class="active" class="text-lg p-2 hover:text-[#F9A825]">首页</router-link>
        </li>
        <li class="mx-4">
          <router-link to="/PJ" exact-active-class="active" class="text-lg p-2 hover:text-[#F9A825]">项目概况</router-link>
        </li>
        <li class="mx-4">
          <router-link to="/popsci" exact-active-class="active" class="text-lg p-2 hover:text-[#F9A825]">科普知识</router-link>
        </li>
        <li class="mx-4">
          <router-link to="/Policie" exact-active-class="active" class="text-lg p-2 hover:text-[#F9A825]">政策法规</router-link>
        </li>
        <li class="mx-4">
          <router-link to="/ID" exact-active-class="active" class="text-lg p-2 hover:text-[#F9A825]">行业动态</router-link>
        </li>
        <li class="mx-4">
          <router-link to="/TC" exact-active-class="active" class="text-lg p-2 hover:text-[#F9A825]">培训课程</router-link>
        </li>
        <li class="mx-4">
          <router-link to="/links" exact-active-class="active" class="text-lg p-2 hover:text-[#F9A825]">相关链接</router-link>
        </li>
        <li class="mx-4">
          <router-link to="/CG" exact-active-class="active" class="text-lg p-2 hover:text-[#F9A825]">成果展示</router-link>
        </li>
        <li class="mx-4">
          <router-link to="/MF" exact-active-class="active" class="text-lg p-2 hover:text-[#F9A825]">微影视图片</router-link>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { baseURL, getIconAPI } from './apis/homeAPI';

const image = ref<{ src: string }>({ src: '' });
const loading = ref(true); // 添加加载状态

const getIcon = async () => {
  try {
    const res = await getIconAPI();
    const { data } = res;
    image.value = {
      src: baseURL + `${data.attributes.image.data.attributes.url}`,
    };
  } catch (error) {
    console.error('Error fetching data:', error);
  } finally {
    loading.value = false; // 数据加载完成后设置 loading 为 false
  }
};

getIcon();
</script>

<style scoped>
/* 可保留其他自定义样式 */

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px; /* 与图标大小一致 */
  height: 64px; /* 与图标大小一致 */
  margin-right: 16px; /* 保持与标题的间距 */
}

.loader {
  border: 8px solid rgba(255, 255, 255, 0.3); /* 背景透明的边框 */
  border-top: 8px solid #3498db; /* 顶部颜色 */
  border-radius: 50%; /* 圆形 */
  width: 50px; /* 图标宽度 */
  height: 50px; /* 图标高度 */
  animation: spin 1s linear infinite; /* 旋转动画 */
}

/* 定义旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
